<template>
  <div>
    <el-card shadow="never" class="border-0">
      <!-- 搜索 -->
      <SearchForm :model="searchForm" @search="getList" @reset="resetSearchForm">
        <SearchItem label="">

          <div class="mt-4" style="width: 100%;margin-left: 0px !important;">
            <el-input v-model="searchForm.name" placeholder="套餐名称、用户名" class="input-with-select">
              <template #prepend>
                <el-button :icon="Search" />
              </template>
              <template #append>
                <el-select v-model="searchForm.type" placeholder="请选择用户类型">
                  <el-option key="0" label="全部" value="" />
                  <el-option key="0" label="个人用户" value="0" />
                  <el-option key="1" label="企业用户" value="1" />
                </el-select>
              </template>
            </el-input>
          </div>


        </SearchItem>
      </SearchForm>
      <!-- 新增|刷新 -->
      <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getList"
        @delete="handleMultiDelete" />

      <el-table ref="multipleTableRef" :data="tableData" stripe v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="类型" width="200">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.type == 0">个人用户</el-tag>
            <el-tag type="info" v-else>企业用户</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="用户" width="200">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.type == 0">{{ scope.row.username }}</el-tag>
            <el-tag type="info" v-else>{{ scope.row.company_name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="套餐名称" width="200" />
        <el-table-column prop="balance_times" label="可用条数" width="200" />
        <!-- <el-table-column label="包含平台" width="300" align="center">
          <template #default="scope">
            <div class="flex items-center">
                        <el-avatar :size="40" :src="scope.row.icon">
                            <img src="/empty.png" />
                        </el-avatar>
                        <div class="ml-3">
                            <h6>{{ scope.row.name }}</h6>
                            <small>ID:{{ scope.row.en_name }}</small>
                        </div>
                    </div>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="激活状态">
          <template #default="{ row }">
            <el-switch
              :modelValue="row.status"
              :active-value="true"
              :inactive-value="false"
              @change="hanledStatus($event, row)"
            >
            </el-switch>
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button @click="handleEdit(scope.row)" text type="primary" class="p-1">
              <el-icon class="el-icon--left" :size="16">
                <Edit />
              </el-icon>续费
            </el-button>

            <el-popconfirm title="是否要删除该记录？" confirmButtonText="确认" cancelButtonText="取消"
              @confirm="handleDelete(scope.row.id)">
              <template #reference>
                <el-button text type="danger" class="p-1">
                  <el-icon class="el-icon--left" :size="16">
                    <Delete />
                  </el-icon>删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <div class="flex items-center justify-center mt-5">
        <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
          :page-size="pageSize" @current-change="getList" />
      </div>
      <!-- 新增|编辑 -->
      <FormDrawer destroyOnClose ref="formDrawerRef" :title="drawerTitle" @submit="selfHandleSubmit">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false">

          <el-tabs type="border-card" @tab-change="onChangeTab">
            <el-tab-pane label="个人用户" v-if="$store.state.user.type == '0'">
              <el-form-item label="用户名" prop="username">
                <el-select placeholder="请选择用户" v-model="form.username" @change="changeUser" style="width: 100%">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="套餐" prop="skus_id">
                <el-select v-model="form.title" placeholder="选择套餐" @change="changeSku" clearable filterable
                  style="width: 100%">
                  <el-option v-for="item in skusList" :key="item.id" :label="item.title" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>


            </el-tab-pane>
            <el-tab-pane label="企业用户" v-if="$store.state.user.type != '0'">

              <!-- <el-form-item label="企业" prop="company_id">
                <el-select placeholder="请输入所属企业..." v-model="form.company_name" @change="changeCompany"
                  style="width: 100%">
                  <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
              </el-form-item> -->
              <el-form-item label="套餐" prop="content_type">
                <el-select v-model="form.title" placeholder="选择套餐" @change="changeSku" clearable filterable
                  style="width: 100%">
                  <el-option v-for="item in skusList" :key="item.id" :label="item.title" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>



          <!-- <el-form-item label="用户" prop="account__username">
            <el-select
              v-model="form.account_id"
              placeholder="选择用户"
              clearable
              filterable
              class="input-width"
            >
              <el-option
                v-for="item in userList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->


        </el-form>
      </FormDrawer>
    </el-card>
  </div>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import ListHeader from "~/components/ListHeader.vue";
import FormDrawer from "~/components/FormDrawer.vue";
import TagInput from "~/components/TagInput.vue";
import SearchForm from "~/components/SearchForm.vue"
import SearchItem from "~/components/SearchItem.vue"
import { Search } from '@element-plus/icons-vue'

import { useInitTable, useInitForm } from "~/composables/useCommon";


// api
import { getSkusBindList, getSkusList, postSkusBind, putSkusBind, deleteSkus, patchSkusStatus } from "~/api/platefrom/skus";
import { getALLCompanyList } from '~/api/company/index'
import { getPersonalUserList } from '~/api/user/index'


import { useStore } from "vuex";
import { formatDateFun, showModal, showPrompt } from "~/composables/util";
import { toast } from "~/composables/util";
import { fromPairs } from "lodash";
const store = useStore();
const { formatDate } = formatDateFun();
const content_type = ref([]);
const list = ref([]);
const platform = ref([]);
const {
  searchForm,
  resetSearchForm,
  tableData,
  loading,
  currentPage,
  total,
  pageSize,
  getList,
  handleDelete,
  hanledStatus,
  multipleTableRef,
  handleSelectionChange,
  handleMultiDelete,
} = useInitTable({
  searchForm: { search: "", title: "", content_type: "", labels: "" },
  requestListAPI: getSkusBindList,
  delete: deleteSkus,
  updateStatus: patchSkusStatus,
  // pageSize: store.state.pageSize.SkusList,
  pageSize: 10,
  onGetListSuccess: (res) => {
    tableData.value = res.data.results
    total.value = res.data.count;
  },
});

const showSearch = ref(false);

const {
  formDrawerRef,
  formRef,
  form,
  rules,
  editId,
  drawerTitle,
  handleSubmit,
  resetForm,
  handleCreate,
  handleEdit,
} = useInitForm({
  getList,
  create: postSkusBind,
  update: putSkusBind,
  form: {
    company_id: "",
    company_name: "",
    user_id: "",
    username: "",
    skus_id: "",
    title: "",
    type: 0,
  },
  rules: {
    skus_id: [{ required: true, message: "请选择套餐", trigger: "blur" }]
  },
});


const skusList = ref([])
const userList = ref([])
const companyList = ref([])
onMounted(() => {
  // 获取套餐信息
  getSkusList({}).then((res) => {
    skusList.value = res.data
  })

  // 获取个人用户
  getPersonalUserList().then((res) => {
    userList.value = res.data
  })
  // 获取公司用户
  getALLCompanyList().then((res) => {
    companyList.value = res.data
  })

})


// tab触发事件
const onChangeTab = (tabname) => {
  if (tabname == '0') {   // 个人用户
    form.company_name = ''
    form.company_id = ''
    form.type = 0
  } else {
    form.user_id = ''
    form.skus_id = ''
    form.type = 1
  }
}

// 选择用户
const changeUser = (res) => {
  console.log(res)
  form.user_id = res.id
  form.username = res.username
  form.company_id = ''
  form.company_name = ''
}

// 选择公司
const changeCompany = (res) => {
  console.log(res)
  form.company_id = res.id
  form.company_name = res.name
  form.user_id = ''
  form.username = ''
}

// 选择套餐
const changeSku = (res) => {
  form.skus_id = res.id
  form.title = res.title
}
// 提交
const selfHandleSubmit = () => {
    if (store.state.user.type == '0') {
        form.company_name = ''
        form.company_id = ''
        form.type = 0
    } else {
        form.company_name = companyList.value[0].name
        form.company_id = companyList.value[0].id
        form.type = 1
    }
    handleSubmit()
}

</script>
